<template>
	<view>
		<!-- 取消理由弹出框 -->
		<u-popup :show="messageInfo.cancelshow" mode="bottom" @close="close">
			<view class="popup_center">
				<text>选择{{messageInfo.value==1?"取消":"退款"}}理由</text>
				<view class="flexbetween popup_nav" v-for="item in list" :key="item.id" @click="changeitem(item)">
					<view class="">{{item.name}}</view>
					<view class="" v-show="item.id==currentid">
						<image src="@/static/images/login/to.png" mode="" class="dui"></image>
					</view>
					<view class="duis" v-show="item.id!=currentid"></view>
				</view>
				
				<view class="look_btn" @click="confirm">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		name:"quxiaolypop",
		props:{
			messageInfo:{
				cancelshow:false,
				value:"",//1取消订单原因，2申请退款原因
			}
		},
		data() {
			return {
				list:[],
				current:"",
				currentid:"",
			};
		},
		created(){
			this.init()
		},
		methods:{
			init(){
				let url = ""
				if(this.messageInfo.value==1){
					url = "/api/order/orderCancelly"
				}else{
					url = "/api/order/orderTklx"
				}
				httpRequest.request(url, 'GET', {
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			changeitem(item){
				this.current = item,
				this.currentid = item.id
			},
			confirm(){
				let data = {
					name:this.current.name,
					id:this.current.id
				}
				this.$emit("surecancel",data)
				this.$parent.cancelshow = false
				this.currentid = ""
			},
			close(){
				this.$parent.cancelshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup_center {
		text-align: center;
		padding: 42rpx 52rpx;
	}
	.popup_nav {
		padding-top: 47rpx;
	}
	.dui {
		width: 26rpx;
		height: 26rpx;
		margin-right: 7rpx;
	}
	.duis{
		width: 24rpx;
		height: 24rpx;
		margin-right: 7rpx;
		border-radius: 50rpx;
		border: 1rpx solid #999;
	}
	.look_btn {
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background: rgba(53, 155, 254, 1);
		text-align: center;
		margin-top: 60rpx;
		padding-bottom: 20rpx;
		padding: 20rpx 0rpx 18rpx 0rpx;
		font-size: 32rpx;
	}
</style>